<!-- 
	微信登录授权弹窗，通过 userStore.SET_SHOW_LOGIN_PANEL() 显示
	<c-wx-login-toast></c-wx-login-toast>
-->
<template>
	<view class="wx-login-container" v-if="userStore.isShowLoginPanel">
		<view class="wx-login-panel">
			<view class="logo">
				<image class="img" src="@/static/images/wx-login-logo.png" mode="widthFix"></image>
			</view>
			<view class="text">
				<text class="text-title">农服站申请获得您的授权</text>
				<text class="text-sub-title">授权登录后才能为你提供更多的服务</text>
			</view>
			<view class="login-btn-group">
				<button type="default" class="login-btn undo" @click="handleUnlogin()">暂不登录</button>
				<button type="default" class="login-btn" open-type="getPhoneNumber"
					@getphonenumber="handleLogin">授权登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { HTTP_REQUEST_URL } from '@/config/index.js';
	import { useUserStore } from '@/store/user.js';
	import api from "@/api/index.js";

	const userStore = useUserStore();

	// 暂不登录
	const handleUnlogin = () => {
		userStore.SET_HIDE_LOGIN_PANEL();
	}

	// 点击授权登录
	const handleLogin = (e) => {
		userStore.SET_TOKEN('759d3b9159e4e3729fce1eb7901d6c1910086');
		userStore.getUserInfo();
		// if (!e.detail.code) return;

		// uni.login({
		// 	provider: "weixin",
		// 	success: async (res_code) => {
		// 		const res = await api.user_api.login({
		// 			login_code: res_code.code,
		// 			mobile_code: e.detail.code,
		//			invitation_code: userStore.registerInviteCode,
		// 		});
		// 		const token = res.data.data.token;
		// 		userStore.SET_TOKEN(token);
		// 		userStore.getUserInfo();
		// 	}
		// })
	}
</script>

<style lang="scss">
	.wx-login-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.wx-login-panel {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 590rpx;
		height: 580rpx;
		border-radius: 20rpx;
		background: white;

		.logo {
			text-align: center;
			border-radius: 20rpx;
			margin: 66rpx auto 0;

			.img {
				width: 162rpx;
				height: 162rpx;
			}
		}

		.text {
			text-align: center;
			margin-top: 46rpx;

			&-title {
				display: block;
				font-size: 32rpx;
				color: #222222;
				font-weight: bold;
			}

			&-sub-title {
				display: block;
				font-size: 30rpx;
				color: #656665;
				margin-top: 36rpx;
			}
		}

		.login-btn-group {
			display: flex;
			justify-content: space-between;
			width: 480rpx;
			margin: 56rpx auto 0;
		}

		.login-btn {
			width: 224rpx;
			height: 78rpx;
			font-size: 28rpx;
			color: white;
			border-radius: 50rpx;
			background-color: #FE3333;
			line-height: 78rpx;
			border: none;
			margin: 0;
			transition: transform 0.2s;

			&.undo {
				background-color: #e6a953;
			}

			&:active {
				transform: scale(0.95);
			}

			&::after {
				display: none;
			}
		}
	}
</style>